<!DOCTYPE html>
<html lang="en">

{include file='index/header'}
<style>
    .telNum{  border: 1px solid #e6e6e6;  height: 35px;  width: 80%;  text-align: center;  }
    .sBtn{  width: 40px;  background: #60B7DA;  padding: 5px 10px;  margin-top: 8px;  color: #fff;}
</style>

<body id="goods" class="flexv">
<form class="flexitemv scroll main" id="form" action="{:url('Indent/indent')}">
    <div class="img"><img src="{:config('image_path')}{$res.p_photo}" alt=""></div>
    <div class="flexv centerh profile">
        <h2>{$res.p_name}</h2>
        <div class="flex bottom">
            <p>¥ {:round($res['p_price'],2)}</p>
            {eq name='res.p_type' value='2'}<span>包邮</span>{/eq}
        </div>
    </div>
    {eq name='res.p_type' value='1'}
    <div class="spec">
        {notempty name='res.spec'}
        <div class="flex centerv item spec-btn">
            <p>规格</p>
            <div class="sp">
                {volist name="res.spec" id="v"}
                <label {eq name='key' value='0'}class="select"{/eq}><input type="radio" name="i_spec" price="{$v.s_price}" class="spec" value="{$v.id}" hidden {eq name='key' value='0'}checked{/eq}>{$v.s_name}/¥ {$v.s_price}</label>
                {/volist}
            </div>
        </div>
        {/notempty}
        <div class="flex centerv item pack-btn">
            <p>包装</p>
            <div class="pa">
                <label class="select"><input type="radio" name="i_packing" price="5" class="pack" value="1" hidden checked>包装/¥ 5</label>
                <label><input type="radio" name="i_packing" price="0" class="pack" value="2" hidden>不包装/¥ 0</label>
            </div>
        </div>
    </div>
    {/eq}
    {notempty name='Think.session.userid'}<input type="hidden" name="i_uid" value="{$Think.session.userid}" />{/notempty}
    <input type="hidden" name="i_pid" value="{$res.id}" />
    <input type="hidden" name="i_type" value="{$res.p_type}" />
    <input type="hidden" name="i_price" id="i_price" value="{$res.p_price}" />
    {eq name='res.p_type' value='1'}
    <input type="hidden" name="i_postage" value="15" />
    {/eq}
    <input type="hidden" name="p_id" value="{$Think.get.pid}" />
    <div class="flexv centerv title">
        <p class="line"></p>
        <h2>商品详情</h2>
    </div>
    <div class="details">
        <p>注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到货物与商城图片、产地附件说明一致。</p>
    </div>
</form>
<div class="flex footer">
    <div class="flexv footer-minitem">
        <a href="/" class="flexitemv center">
            <i class="iconfont icon-index"></i>
            <p>主页</p>
        </a>
    </div>
    <div class="flexv footer-minitem">
        <a href="{:url('User/index')}" class="flexitemv center">
            <i class="iconfont icon-center"></i>
            <p>我的</p>
        </a>
    </div>
    <div class="flexv footer-minitem" id="kefu">
        <a href="tel:{:v('config.service_name')}" class="flexitemv center">
            <i class="iconfont icon-cservice"></i>
            <p>客服</p>
        </a>
    </div>
    <div class="flexitemv center footer-item">
        <p class="price">¥ {:round($res['p_price'],2)}</p>
        {eq name='res.p_type' value='1'}
        <p class="postage" price="15.00">邮费：15.00</p>
        {else /}
        <p class="postage" price="15.00">包邮</p>
        {/eq}
    </div>
    <div class="flexitemv sub">
        <a href="javascript:;" class="flexitem center sub">提交订单</a>
    </div>
</div>
<input type="hidden" id="userid" value="{$Think.session.userid}">
<input type="hidden" id="p_type" value="{$res.p_type}">
{js href="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"}
{js href="__ROOT__/template/index/plugins/mobile/layer.js"}
{js href="__ROOT__/public/static/js/checkform.js"}
{js href="__ROOT__/public/static/js/functions.js"}
<!--{js href="__ROOT__/template/index/js/common.js"}-->
{js href="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"}
<script>
    $('.item label').click(function () {
        $(this).addClass('select').siblings().removeClass('select');
    });

    new checkForm({
        form : '#form',
        btn : '.sub',
        error : function (e,msg){
            showMsg(msg,0,'#form');
        },
        complete : _.throttle(function (form){
            var user = document.querySelector('#userid').value;
            var type = document.querySelector('#p_type').value;
            if(user == '' && type==1)
            {
                layer.open({
                    title: [
                        '请填写购买手机号',
                        'background-color: #FF4351; color:#fff;'
                    ]
                    ,
                    content: '<input type="tel" placeholder="手机号" name="tel" class="telNum"><div class="flex center"><p class="sBtn" data="{$Think.get.pid}" data-url=' + '{:url("Indent/isUser")}' + '>确定</p></div>'
                    ,
                    success: function (el) {
                        var btn = el.querySelector('.sBtn');
                        btn.addEventListener('click', function () {
                            var val = el.querySelector('input').value;
                            var url = $(this).attr('data-url');
                            var pid = $(this).attr('data');
                            if (val !== '') {
                                $.get(url, {phone: val, pid: pid}, function (ret) {
                                    console.log(ret);
                                    if (ret.code == 1) {
                                        var url = form.getAttribute('action');
                                        var datas = $(form).serializeArray();
                                        $.post(url, datas, function (ret) {
                                            showMsg(ret.msg, ret.code);
                                            if (ret.url) setTimeout(function () {
                                                window.location.href = ret.url;
                                            }, 1000);
                                        }, 'json');
                                    } else {
                                        showMsg(ret.msg);
                                        setTimeout(function () {
                                            window.location.href = ret.url;
                                        },1000);
                                    }
                                })
                            } else {
                                showMsg('手机号不能为空');
                            }
                        });
                    }
                });
            }else{
                var url = form.getAttribute('action');
                var datas = $(form).serializeArray();
                $.post(url, datas, function (ret) {
                    showMsg(ret.msg, ret.code);
                    if (ret.url) setTimeout(function () {
                        window.location.href = ret.url;
                    }, 1000);
                }, 'json');
            }
        }, 2000, { 'trailing': false })
    });

    {eq name='res.p_type' value='1'}
    var {notempty name='res.spec'}spec = $('input[name="i_spec"]:checked').attr('price'),{else /}spec = 0,{/notempty}
        pack = $("input[name='i_packing']:checked"),
        price= $('.price');
    price.html("¥ " + (Number(spec)+Number(pack.attr('price'))+15).toFixed(2));
    $('input').change(function () {
        var {notempty name='res.spec'}spec = $('input[name="i_spec"]:checked').attr('price'),{else /}spec = 0,{/notempty}
            pack = $("input[name='i_packing']:checked");
        price.html("¥ " + (Number(spec)+Number(pack.attr('price'))+15).toFixed(2));
    });
    {/eq}
</script>
{include file='index/footer'}
</body>
</html>